<template>
  <div class="box" @mousemove="mouseMove">
     <p>clientX--{{ X }}</p>
     <p>clientY--{{ Y }}</p>
     <button @click="changeDog">点击切换</button>
     <img width="200" :src="url" alt="">
  </div>
</template>

<script lang="ts">
import { defineComponent} from 'vue'
export default defineComponent({
  name: 'App',
})
</script>

<script setup lang="ts">
  import useMousePoint  from "./hooks/mouseMove"
  import useChangeDog from "./hooks/getDog"
  //鼠标移动 数据改变
  const {X,Y,mouseMove} =  useMousePoint()
  
  //点击切换狗
  const {url,changeDog} = useChangeDog()

</script>
<style  scoped>
.box{
  width:500px;
  height:400px;
  border:1px solid red
}
</style>